<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title></title>
    <style>
     .box{
         width: 520px;
         height: 280px;
         margin: 100px auto;
         position: absolute;
     }
     li{
        position: absolute;
        display: none;

      }
      li.current{
        display: block;
      }
     ul{
       margin: 0;
       padding: 0;
       list-style: none;
     }
     .yuandian{
         width: 200px;
         height: 20px;
         /* border: 1px solid black; */
         /* background-color: gray; */
         border-radius: 10px;
         position: absolute;
         left: 160px;
         bottom: 30px;
         display: flex;
     }
     .yuandian span{
         width: 10px;
         height: 10px;
         border: 1px solid black;
         border-radius: 5px;
         margin-top: 5px;
         margin-left: 25px;
         background-color: white;
     }
    .yuandian .one{
        background-color: red;
    }
    </style>
</head>
<body>
  <div class="box">
      <ul>
     <li class="current"><a href="" ><img src="img/01.jpg" alt=""></a></li>
     <li><a href="" ><img src="img/02.jpg" alt=""></a></li>
     <li><a href="" ><img src="img/03.jpg" alt=""></a></li>
     <li><a href="" ><img src="img/04.jpg" alt=""></a></li>
     <li><a href="" ><img src="img/05.jpg" alt=""></a></li>
        
      </ul>
    <div class="yuandian">
            <span class="one"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
  </div>
</body>
</html>
<script>
    var lis = document.querySelectorAll('li')
    var spans = document.querySelectorAll('span')
    var index = 0;
    setInterval(changeImage,1500);
    function changeImage(){
        for(var i = 0; i < lis.length; i ++){
            lis[i].className = '';
            spans[i].className = '';
        }
        index ++;
        if (index==5) {
            index = 0;
        } 
        console.log(index); 
        lis[index].className = 'current';
        spans[index].className = 'one';        
    }

</script>